<template>
  <div class="login">
    <div class="box">
      <p class="please">请登录</p>
      <p class="account">
        <span>账号：</span>
        <el-input v-model="ruleForm.username" placeholder="请输入账号"></el-input>
      </p>
      <p class="pass">
        <span>密码：</span>
        <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
      </p>
      <p class="btn">
        <el-row>
          <el-button class="button" type="primary" @click="onLogin">登录</el-button>
        </el-row>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "admin",
      },
      username: "",
      password: "",
    };
  },
  methods: {
    onLogin() {
      this.$network
        .getLogin({
          username: this.ruleForm.username,
          password: this.ruleForm.password,
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 0) {
            localStorage.setItem("admin", this.ruleForm.username);
            this.$router.push("/");
            this.$message(res.data.msg);
          } else {
            this.$message(res.data.msg);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/scss/index.scss";
.login{
  background: url(../assets/1.jpg) no-repeat;
}
.box {
  @include SizeBack(30%, 300px, #eeeeee);
  margin: 100px auto;
  border: 1px solid #000;
  border-radius: 10px;
}
.please {
  @include Size(20%, 20px);
  @include FontOnly(18px);
  @include Pd(20px);
  margin: 0px auto;
  text-align: center;
}
.account,
.pass {
  @include Size(80%, 70px);
  margin: 0px auto;
}
.btn {
  @include Size(80%, 40px);
  margin: 10px auto;
}
.button {
  @include Size(100%, 40px);
}
</style>